<template>
  <div class="my-conetent body-bg">
    <!-- top -->
    <div class="top">
      <!-- 头像，微信名称/姓名 -->
      <div class="user-infor">
        <img class="bg-img" src="/static/images/my/my-bg.png" alt="img">
        <van-image round src="https://img.yzcdn.cn/vant/cat.jpeg" @click="goInfor" />
        <span class="user-name" @click="goInfor">{{name || "--"}}</span>
      </div>
      <!-- 购买记录 -->
      <div class="shopping-records">
        <div class="shopping-cont">
          <div class="shopping-items" @click="goClassList">
            <img class="class-icon" src="/static/images/my/class-icon.png" alt="购课单">
            <p class="shopping-title">购课单</p>
          </div>
          <div class="shopping-items" @click="goShoppingList">
            <img class="class-icon" src="/static/images/my/shopping-icon.png" alt="购物订单">
            <p class="shopping-title">购物订单</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 入口 -->
    <div class="join" ref="join">
      <ul class="join-cont">
        <li class="join-items" @click="goDet(1)">
          <div class="join-items-p">
            <img class="join-icon" src="/static/images/my/icon1.png" alt="icon">
            <span class="join-title">我的装备</span>
          </div>
          <van-icon name="arrow" color="#00B7EE" size="20px" />
        </li>
        <li class="join-items" @click="goDet(2)">
          <div class="join-items-p">
            <img class="join-icon" src="/static/images/my/icon2.png" alt="icon">
            <span class="join-title">我的积分</span>
          </div>
          <van-icon name="arrow" color="#00B7EE" size="20px" />
        </li>
        <li class="join-items" @click="goDet(3)">
          <div class="join-items-p">
            <img class="join-icon" src="/static/images/my/icon3.png" alt="icon">
            <span class="join-title">我的优惠券</span>
          </div>
          <van-icon name="arrow" color="#00B7EE" size="20px" />
        </li>
        <li class="join-items" @click="goDet(4)">
          <div class="join-items-p">
            <img class="join-icon" src="/static/images/my/icon4.png" alt="icon">
            <span class="join-title">活动报名记录</span>
          </div>
          <van-icon name="arrow" color="#00B7EE" size="20px" />
        </li>
        <li class="join-items" @click="goDet(5)">
          <div class="join-items-p">
            <img class="join-icon" src="/static/images/my/icon5.png" alt="icon">
            <span class="join-title">请假记录</span>
          </div>
          <van-icon name="arrow" color="#00B7EE" size="20px" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import store from '../../store/globalStore'
export default {
  data() {
    return {
      name: "" // 微信名称/家长名字
    };
  },
  onShow() {
    this.name = this.$store.state.name;
  },
  methods: {
    // 个人信息
    goInfor() {
      wx.navigateTo({
        url: '/pages/personalInformation/main'
      })
    },
    // 购课单
    goClassList() {
      wx.navigateTo({
        url: '/pages/shopClassList/main'
      })
    },
    // 购物单
    goShoppingList() {
      wx.navigateTo({
        url: '/pages/shopList/main'
      })
    },
    goDet(id) {
      switch (id) {
        case 1:
          wx.navigateTo({
            url: '/pages/myEquipment/main',
          })
          break;
        case 2:
          wx.navigateTo({
            url: '/pages/myPoints/main',
          })
          break;
        case 3:
          wx.navigateTo({
            url: '/pages/myCoupon/main',
          })
          break;
        case 4:
          wx.navigateTo({
            url: '/pages/activityRecord/main',
          })
          break;
        case 5:
          wx.navigateTo({
            url: '/pages/leaveRecord/main',
          })
          break;
      
        default:
          break;
      }
    }
  },
};
</script>
<style lang="less">
// 改样式用来重置vant 默认样式
  .user-infor{
    .van-image{
      width: 75px !important;
      height: 75px !important;
      margin: 12px 0 8px 0;
    }
  }
</style>
<style lang="less" scope>
.my-conetent {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  .top{
    width: 100%;
    position: relative;
    // 用户信息
    .user-infor {
      width: 100%;
      height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      .bg-img{
        width: 100%;
        height: 180px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
      }
      .user-name{
        padding: 0 18px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        box-sizing: border-box;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        position: relative;
        z-index: 2;
      }
    }
    // 购买记录
    .shopping-records{
      width: 100%;
      height: 80px;
      padding: 0 18px;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      bottom: -40px;
      .shopping-cont{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 5px;
        color: #333;
        box-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.2);
        .shopping-items{
          text-align: center;
          .class-icon{
            width: 23px;
            height: 24px;
          }
          .shopping-title{
            font-size: 15px;
            color: #333;
            font-weight: bold;
          }
        }
      }
    }
  }
  // 入口
  .join{
    width: 100%;
    margin-top: 55px;
    background: #fff;
    .join-cont{
      width: 100%;
      .join-items{
        width: 100%;
        height: 50px;
        padding: 0 18px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.5px solid #DDDDDD;
        .join-items-p{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 100%;
          position: relative;
          .join-icon{
            width: 20px;
            height: 22px;
          }
          .join-title{
            font-size: 16px;
            color: #333;
            margin-left: 15px;
          }
          .join-right{
            width: 12px;
            height: 16px;
            position: absolute;
            right: 18px;
          }
        }
      }
    }
  }
}
</style>
